<!DOCTYPE html>
<html>
<head>
<title></title>
<#include "/header.html">
<style type="text/css">
  .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
    width:100%
  }

  .row {
    border-top: 0px dotted #ddd;
    margin: 0 0 15px 0;
    padding: 0px 2px 0px 2px;
  }
</style>
</head>
<body>
  <div id="rrapp" v-cloak>
    <div v-show="showList">
      <div class="grid-btn">
        <div class="row">
          <div class="col-xs-4">
            <el-select size="small" style="width: 100%" v-model="q.etlSystem" placeholder="请选择作业系统名称" clearable>
              <el-option v-for="option in allsys" :key="option.code" :label="option.name" :value="option.code"></el-option>
            </el-select>
          </div>
          <div class="col-xs-4">
            <el-select size="small" style="width: 100%" v-model="q.lastJobStatus" placeholder="请选择作业状态" clearable>
              <el-option v-for="item in allstatus" :key="item.status" :label="item.status_desc" :value="item.status"></el-option>
            </el-select>
          </div>
          <div class="col-xs-4">
            <el-input v-model="q.etlJob" size="small" placeholder="请输入要查询的作业名称" clearable></el-input>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-4">
            <el-date-picker v-model="q.lastTxDateStart" size="small" style="width: 100%" type="date" placeholder="起始数据日期" value-format="yyyy-MM-dd"></el-date-picker>
          </div>
          <div class="col-xs-4">
            <el-date-picker v-model="q.lastTxDateEnd" size="small" style="width: 100%" type="date" placeholder="截止数据日期" value-format="yyyy-MM-dd"></el-date-picker>
          </div>
          <div class="col-xs-4">
            <a class=" btn btn-default btn-sm" @click="query(true)"><span class="glyphicon glyphicon-search"></span>&nbsp; 查询 </a>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-12">
            <a class="btn btn-primary btn-sm" @click="openTask"><span class="glyphicon glyphicon-repeat"></span> &nbsp;定时重跑 </a>
            <a class="btn btn-warning btn-sm" @click="openRerun"><span class="glyphicon glyphicon-repeat"></span> &nbsp;批量重跑 </a>
            <a class="btn btn-warning btn-sm" @click="openUpdateStatus"><span class="glyphicon glyphicon-repeat"></span> &nbsp;批量更新作业状态 </a>
            <a class="btn btn-warning btn-sm" @click="openUpdateTxDate"><span class="glyphicon glyphicon-repeat"></span> &nbsp;批量更新作业数据日期 </a>
            <a class="btn btn-warning btn-sm" @click="openUpdateEnable"><span class="glyphicon glyphicon-repeat"></span> &nbsp;批量更新作业有效性 </a>
            <a class="btn btn-primary btn-sm" @click="analysis"> &nbsp;血缘影响分析 </a>
            <el-checkbox v-model="refresh_auto">自动刷新</el-checkbox>
            <el-select size="mini" style="width: 100px" v-model="refresh_freq" placeholder="请选择刷新时间">
              <el-option key="10000" label="10" value="10000"></el-option>
              <el-option :key="20000" label="20" :value="20000"></el-option>
              <el-option :key="30000" label="30" :value="30000"></el-option>
              <el-option :key="60000" label="60" :value="60000"></el-option>
              <el-option :key="120000" label="120" :value="120000"></el-option>
            </el-select>

          </div>

        </div>
        <!--<a class="btn btn-warning" @click="openRerun"><span class="glyphicon glyphicon-repeat"></span> &nbsp;重跑 </a>-->
        <div style="clear:both;"></div>
      </div>
    <div class="ml-15 mr-15">
      <div>
        <el-table
                :data="dataPage.list"
                border
                size="small"
                height="452"
                :stripe="true"
                style="width: 100%"
                @selection-change="handleSelectionChange">
          <el-table-column
                  type="selection"
                  width="50">
          </el-table-column>
          <el-table-column
                  label="序号"
                  :formatter="colIndex"
                  width="50"
                  align="center">
          </el-table-column>
          <el-table-column
                  prop="etlSystem"
                  label="作业系统名称"
                  :show-overflow-tooltip="true"
                  align="center">
          </el-table-column>
          <el-table-column
                  prop="etlJob"
                  label="作业名称"
                  :show-overflow-tooltip="true"
                  align="center">
          </el-table-column>
          <el-table-column
                  prop="description"
                  label="描述"
                  :show-overflow-tooltip="true"
                  align="center">
          </el-table-column>
          <el-table-column
                  prop="frequency"
                  label="作业周期"
                  :show-overflow-tooltip="true"
                  align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.frequency == '0'" class="table-label-gb label-primary">日作业</span>
              <span v-else="" class="table-label-gb label-info">月作业</span>
            </template>
          </el-table-column>
          <el-table-column
                  prop="enable"
                  label="是否有效"
                  :show-overflow-tooltip="true"
                  align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.enable == 1" class="table-label-gb label-success">有效作业</span>
              <span v-else-if="scope.row.enable == 0" class="table-label-gb label-default">无效作业</span>
              <span v-else="" class="table-label-gb label-default">未知状态</span>
            </template>
          </el-table-column>
          <el-table-column
                  prop="lastStarttime"
                  label="开始时间"
                  :show-overflow-tooltip="true"
                  align="center">
          </el-table-column>
          <el-table-column
                  prop="lastEndtime"
                  label="结束时间"
                  :show-overflow-tooltip="true"
                  align="center">
          </el-table-column>
          <el-table-column
                  prop="id"
                  label="定时任务"
                  :show-overflow-tooltip="true"
                  :formatter="triggerFormat"
                  align="center">
          </el-table-column>
          <el-table-column
                  prop="lastJobstatus"
                  label="运行状态"
                  :show-overflow-tooltip="true"
                  align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.lastJobstatus == 'Done'" class="table-label-gb label-success">执行成功</span>
              <span v-else-if="scope.row.lastJobstatus == 'Pending'" class="table-label-gb label-default">即将执行</span>
              <span v-else-if="scope.row.lastJobstatus == 'Ready'" class="table-label-gb label-info">准备执行</span>
              <span v-else-if="scope.row.lastJobstatus == 'Running'" class="table-label-gb label-primary">正在执行</span>
              <span v-else-if="scope.row.lastJobstatus == 'Failed'" class="table-label-gb label-danger">运行失败</span>
              <span v-else="" class="table-label-gb label-default"></span>
            </template>
          </el-table-column>
          <el-table-column
                  label="数据日期"
                  :show-overflow-tooltip="true"
                  align="center">
            <template slot-scope="scope">
              <span>{{dateFormat('YYYY-mm-dd',scope.row.lastTxdate)}}</span>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="dataPage.currPage"
                :page-size="dataPage.pageSize"
                :page-sizes="[10, 20, 30]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="dataPage.totalCount">
        </el-pagination>
      </div>
    </div>
    </div>

    <el-dialog :title="title" :visible="showTaskData" :close-on-click-modal="false" :show-close="false">
      <el-radio-group v-model="triggerJob.lastTxDate" size="small">
        <el-radio-button :label="-1">前一天</el-radio-button>
        <el-radio-button :label="0">当天</el-radio-button>
        <el-radio-button :label="1">后一天</el-radio-button>
      </el-radio-group>
      <el-input size="small" v-model="schedule.cronExpression" placeholder="如：0 0 12 * * ?" style="margin-top: 10px"></el-input>
      <div slot="footer" class="dialog-footer">
        <a class="btn btn-danger btn-sm" @click="deleteTigger" v-if="schedule.jobId != null">删除定时器</a>
        <a class="btn btn-primary btn-sm" @click="taskmulti">确定</a>
        <a class="btn btn-warning btn-sm" @click="reBack">返回</a>
      </div>
    </el-dialog>

  <el-dialog :title="title" :visible="showQueryData" :close-on-click-modal="false" :show-close="false">
    <el-date-picker v-model="q.rerun_data_date" size="small" style="width: 100%" type="date" placeholder="重跑数据日期" value-format="yyyy-MM-dd"></el-date-picker>
    <div slot="footer" class="dialog-footer">
      <a class="btn btn-primary btn-sm" @click="rerunmulti">确定</a>
      <a class="btn btn-warning btn-sm" @click="reBack">返回</a>
    </div>
  </el-dialog>


  <!--批量更新作业状态开始-->
  <el-dialog title="更新作业状态" :visible="showUpdateBatchStatus" :close-on-click-modal="false" :show-close="false">
    <el-select size="small" style="width: 100%" v-model="q.newJobStatus" placeholder="请选择作业状态">
      <el-option v-for="item in allstatus" :key="item.status" :label="item.status_desc" :value="item.status"></el-option>
    </el-select>
    <div slot="footer" class="dialog-footer">
      <a class="btn btn-primary btn-sm" @click="updateBatchStatus">确定</a>
      <a class="btn btn-warning btn-sm" @click="reBack2">返回</a>
    </div>
  </el-dialog>
  <!--批量更新作业状态结束-->

  <!--批量更新作业数据日期开始-->
  <el-dialog title="更新作业数据日期" :visible="showUpdateBatchJobTxDate" :close-on-click-modal="false" :show-close="false">
    <el-date-picker v-model="q.newJobTxdate" size="small" style="width: 100%" type="date" placeholder="请选择更新作业数据日期" value-format="yyyy-MM-dd"></el-date-picker>
    <div slot="footer" class="dialog-footer">
      <a class="btn btn-primary btn-sm" @click="updateBatchJobTxDate">确定</a>
      <a class="btn btn-warning btn-sm" @click="reBack3">返回</a>
    </div>
  </el-dialog>
  <!--批量更新作业数据日期结束-->

  <!--批量更新作业有效性开始-->
  <el-dialog title="更新作业状态" :visible="showUpdateBatchEnable" :close-on-click-modal="false" :show-close="false">
    <el-select size="small" style="width: 100%" v-model="q.newEnableFlag" placeholder="请选择作业有效性">
      <el-option key="1" label="置为有效" value="1"></el-option>
      <el-option key="0" label="置为无效" value="0"></el-option>
    </el-select>
    <div slot="footer" class="dialog-footer">
      <a class="btn btn-primary btn-sm" @click="updateBatchEnable">确定</a>
      <a class="btn btn-warning btn-sm" @click="reBack4">返回</a>
    </div>
  </el-dialog>
  <!--批量更新作业有效性结束-->
    <!-- 血缘影响分析图 -->
    <div id="analysisLayer" style="height:100%;width:100%;display:none;">
      <div style="height:40px;clear:both;">
        <el-form >
          <el-form-item label="显示">
            <el-row>
              <el-col :span="17">
                <el-radio-group v-model="showRadio" @change="setLayer">
                  <el-radio label="0">所有层</el-radio>
                  <el-radio label="1">邻近层</el-radio>
                </el-radio-group>
              </el-col>
              <el-col :span="6" style="text-align: right">
                <a class="btn btn-warning btn-sm" @click="back"> &nbsp;返回 </a>
              </el-col>
            </el-row>

          </el-form-item>
        </el-form>

      </div>
      <div id="analysisChart" style="width:100%;height:calc(100% - 45px);overflow-x:auto;overflow-y: auto;"></div>
    </div>
  </div>
  <script src="${request.contextPath}/statics/libs/echarts/echarts.min.js"></script>
  <script src="${request.contextPath}/statics/js/modules/etl/jobanalysis.js"></script>
  <script src="${request.contextPath}/statics/js/modules/etl/jobrerun.js"></script>
  <script>
			$(document)
					.ready(
							function() {
								var MaxInputs = 8; //maximum input boxes allowed
								var InputsWrapper = $("#InputsWrapper"); //Input boxes wrapper ID
								var AddButton = $("#AddMoreFileBox"); //Add button ID

								var x = InputsWrapper.length; //initlal text box count
								var FieldCount = 1; //to keep track of text box added
								$(AddButton)
										.click(
												function(e) //on add input button click
												{
													if (x <= MaxInputs) //max input box allowed
													{
														FieldCount++; //text box added increment
														//add input box
														$(InputsWrapper)
																.append(
																		'<div><input type="text" name="mytext[]" id="field_'+ FieldCount +'" value="Text '+ FieldCount +'"/><a href="#" class="removeclass"><input type="button" value="删除"></a></div>');
														x++; //text box increment
													}
													return false;
												});

								$("body").on("click", ".removeclass", function(e) { //user click on remove text
									if (x > 1) {
										$(this).parent('div').remove(); //remove text box
										x--; //decrement textbox
									}
									return false;
								})

							});
		</script>
</body>
</html>
